<template>
  <el-timeline class="audit-timeline" :class="size">
    <el-timeline-item v-for="(item, index) in records" :key="index" :color="index === 0 ? '#67C23A' : ''">
      <div v-if="item.status > 2 && !item.actionLogStatus" class="meta">
        <span :class="{ 'color-success': index === 0 }">发起审批</span>
        <span>{{ item.createTime }}</span>
      </div>
      <template v-else>
        <div class="meta">
          <span :class="{ 'color-success': index === 0 }">{{ records[index + 1].auditStatus }}</span>
          <span>{{ item.updateTime }}</span>
        </div>
        <el-form class="key-value" label-width="100px" label-suffix="：">
          <el-form-item label="审批人">{{ item.updateUsername }}</el-form-item>
          <el-form-item label="审批意见">
            <template v-if="item.status > 2">
              {{ item.actionLogStatus | workOrderProcessAuditStatus }}
            </template>
            <template v-else>{{ item.status | workOrderProcessAuditStatus }}</template>
          </el-form-item>
          <el-form-item label="备注">
            <div v-html="txt2HTML(item.comment)"></div>
          </el-form-item>
        </el-form>
      </template>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { txt2HTML, workOrderProcessAuditStatus } from "@/utils/filters";

export default {
  name: "auditProcessRecord",
  filters: { workOrderProcessAuditStatus },
  props: {
    records: { type: Array, default: Array },
    size: { type: String, default: "normal" }, // normal, mini
  },
  methods: {
    txt2HTML,
  },
};
</script>

<style lang="less" scoped>
.audit-timeline {
  margin-top: 20px;
  margin-left: 10px;
  .meta {
    position: relative;
    top: -2px;
    display: flex;
    align-items: center;
    color: #909399;

    span {
      flex: 1;
      font-size: 14px;
      &:first-child {
        font-size: 16px;
      }
    }
  }

  &.mini {
    .meta {
      span {
        &:first-child {
          font-size: 14px;
        }

        &:last-child {
          text-align: right;
          font-size: 12px;
        }
      }
    }
  }

  .content {
    margin-top: 12px;
    color: #000;
  }
}
.el-form-item__content {
  div {
    word-break: break-all;
  }
}
</style>
<style lang="less">
.audit-timeline.mini {
  .el-timeline-item {
    padding-bottom: 5px;
  }

  .key-value .el-form-item {
    padding: 2px 0;
  }
}
</style>
